import * as echarts from 'echarts'

export function handleCharts(option,id) {
  let chart = document.getElementById(id)
  if (!chart) {
    chart = document.createElement('div')
    chart.setAttribute('id', id)
    chart.style.height = '330px'
    chart.style.width = '550px'
  }
  // document.body.appendChild(chart)

  const myChart = echarts.init(chart)

  myChart.setOption(option)
  // document.body.appendChild(chart)
  return myChart.getDataURL('png')
}

export function handlePieChart(data, title) {
  let option = {
    title: { text: title, textStyle: { fontSize: 20 }, x: 'center', y: 'top', textAlign: 'center' },
    series: [{ type: 'pie', data: data, center: ['34%', '50%'], radius:['0%','60%'] }],
    animation: false,
    legend: {
      left: 'right',
      orient: 'vertical',
      textStyle: {
        fontSize: 14,
      },
      grid:{
        left:15
      },
      formatter: function (name) {
        let title =
          name +
          ' ' +
          data.find((item) => {
            return item.name === name
          }).percent
        return title
      }
    }
  }
  return handleCharts(option, 'echart')
}
